<template>
  <div class="chart">
    <div class="chart_header">
      <div class="header_static">
        <div 
          :class="{'header_static_item': true, 'header_static_item_click': staticIndex === index}"
          @click="handleSelectStatic(index)"
          v-for="(item, index) in staticData" 
          :key="'static' + index"
        >{{ item }}</div>
      </div>
      <div class="header_book">
        <i class="iconfont icon-benzi"></i>
      </div>
    </div>
    <div class="chart_body">
      <ri-chang v-if="staticIndex === 0"></ri-chang>
      <month-static v-if="staticIndex === 1"></month-static>
      <year-static v-if="staticIndex === 2"></year-static>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import RiChang from '@/components/chart/RiChang.vue';
import MonthStatic from '@/components/chart/MonthStatic.vue';
import YearStatic from '@/components/chart/YearStatic.vue';
export default defineComponent({
    components: { RiChang, MonthStatic, YearStatic },
    setup() {
      const staticIndex = ref(0)
      const staticData = ["日常", "月统计", "年统计", "自定义"]
      // 选择统计方式
      const handleSelectStatic = (index: number) => {
          staticIndex.value = index;
      };
      return {
          staticIndex,
          staticData,
          handleSelectStatic
      };
    },
})
</script>

<style scoped>
  .chart_header {
    display: flex;
    justify-content: space-between;
    margin: 10px 16px;
  }
  .header_static {
    display: flex;
  }
  .header_static_item, .header_book {
    padding: 10px;
  }
  .header_static_item_click {
    background-color: #f9c3c2;
    color: #fff;
    border-radius: 4px 10px;
  }
  .chart_body {
    background-color: #f9c3c233;
    overflow: hidden;
  }
</style>